<!DOCTYPE html>
<html>
<head>
    <title>register.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <LINK rel="Shortcut icon" href="favicon.ico" />
    <style>
        body {
            background-image: url("../images/bg.jpg");
            text-align: center;
            background-repeat: repeat-x;
            background-position: 0px 0px ;
            background-size：

        }

        .table {
            border: 1px solid #90BFFF;
            width:810px;

        }

        tr {
            font-family: 微软雅黑;
            font-weight:800;
            color: #448EF3;
        }

        input{
            border: 1px solid #448EF3;
            color: #448EF3;
            font-weight:bold;
            font-family: "微软雅黑";
            height: 35px;
            line-height: 30px;
            border-radius:5px;
            padding-left: 5px;
            padding-right: 5px;
        }

        .submit {
            width: 150px;
            height: 40px;
            cursor :hand;
            font-size: 20px;
            color: #ffffff;
            background-color: #448EF3;
            border: 0px;
        }

        .thead {
            height: 40px; background : #90BFFF;
            font-family: "微软雅黑";
            font-size: 30px;
            font-weight: 700;
            color: #ffffff;
            background: #90BFFF;
        }
        #3{

            margin-bottom: 100px;
        }

    </style>
    <script type="text/javascript">
        function ChkAllClick(sonName, cbAllId){
            var arrSon = document.getElementsByName(sonName);
            var cbAll = document.getElementById(cbAllId);
            var tempState=cbAll.checked;
            for(i=0;i<arrSon.length;i++) {
                if(arrSon[i].checked!=tempState)
                    arrSon[i].click();
            }
        }

        function ChkSonClick(sonName, cbAllId) {
            var arrSon = document.getElementsByName(sonName);
            var cbAll = document.getElementById(cbAllId);
            for(var i=0; i<arrSon.length; i++) {
                if(!arrSon[i].checked) {
                    cbAll.checked = false;
                    return;
                }
            }
            cbAll.checked = true;
        }

        function ChkOppClick(sonName){
            var arrSon = document.getElementsByName(sonName);
            for(i=0;i<arrSon.length;i++) {
                arrSon[i].click();
            }
        }

        function changeBgColor(btn){
            var btn = document.getElementById(btn);
            btn.style.backgroundColor = "#90BFFF"
        }
        function recoverBgColor(btn){
            var btn = document.getElementById(btn);
            btn.style.backgroundColor = "#448EF3"
        }


        function play(){
            document.getElementById("menu_item").style.display = "";
        }

        function noplay(){
            document.getElementById("menu_item").style.display = "none";
        }

        function passwd(){
            var pass = document.getElementById("password").value;
            var tip = document.getElementById("tip");
            if (pass.length < 4) {
                document.getElementById("meter").value = pass.length;
                tip.innerHTML = "差";
            }
            else
            if (pass.length <= 8) {
                document.getElementById("meter").value = pass.length;
                tip.innerHTML = "中";
            }
            else {
                document.getElementById("meter").value = pass.length;
                tip.innerHTML = "高";
            }
        }
    </script>
</head>
<body>
<div id="3" style="position: relative; top: 100px; z-index: 3;">
    <form id="f1" action="register.html" method="post">
        <table align="center" cellspacing="0" class="table">
            <tr class="thead">
                <td align="center">
                    会员注册
                </td>
            </tr>
            <tr>
                <td>
                    <table id="registertable" border="0px" align="center" border="0px" cellspacing="0" cellpadding="5px">
                        <tr>
                        <tr>
                            <td align="right">
                                员工编号：
                            </td>
                            <td align="left">
                                <input type="text" name="username" placeholder="用户名" required/>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                密 码：
                            </td>
                            <td align="left">
                                <input type="password" name="password" id="password" placeholder="密码" required onkeyup="passwd()"/>
                                <meter min="1" max="10" low="5" high="8" value="0" id="meter">
                                </meter>
                                <span id="tip"></span>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                密码确认：
                            </td>
                            <td align="left">
                                <input type="password" name="password2" placeholder="确认密码"  required/>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                生  日：
                            </td>
                            <td align="left">
                                <input type="date" name="borthday" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                性 别：
                            </td>
                            <td align="left">
                                <input type="radio" name="gender" value="0" checked/>男
                                <input type="radio" name="gender" value="1"/>女
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                邮 箱：
                            </td>
                            <td align="left">
                                <input type="email" name="email" placeholder="邮箱" id="email" required/>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                手 机：
                            </td>
                            <td align="left">
                                <input type="tel" pattern="[0-9]{11}" id="p" name="phone" placeholder="请输入11位数字" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                地 址：
                            </td>
                            <td align="left">
                                <input type="text" name="address" placeholder="地址" list="l"/>
                                <datalist id="l">
                                    <option value="sh">上海</option>
                                    <option value="bj">北京</option>
                                    <option value="js">江苏</option>
                                    <option value="zz">郑州</option>
                                    <option value="sz">深圳</option>
                                </datalist>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                个人网页：
                            </td>
                            <td align="left">
                                <input type="url" name="page" placeholder="主页网址" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                起床时间：
                            </td>
                            <td align="left">
                                <input type="time" name="bed" onblur="pro()"/>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                头像：
                            </td>
                            <td align="left">
                                <input type="file" id="f" accept="image/jpeg" onchange="show()"/><span><img id="img" src="" width="60" height="60" /></span>
                                <script>
                                    function show(){
                                        var file = document.getElementById("f").files[0];
                                        var fileReader = new FileReader();
                                        fileReader.readAsDataURL(file);
                                        fileReader.onload = function(){
                                            document.getElementById("img").src = fileReader.result;
                                        }
                                    }
                                </script>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <details>
                                    <p>
                                        允许注册
                                        <mark>
                                            许可证
                                        </mark>信息
                                    </p>
                                    <summary>
                                        注册许可信息
                                    </summary>
                                </details>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                验证码：
                            </td>
                            <td valign="middle">
                                <input type="text" name="captcha" size="11" maxlength="4" title="输入右边的验证码" />
                                <span id="span"></span>
                                <script>
                                    var span = document.getElementById("span");
                                    span.innerHTML=Math.floor(Math.random());
                                </script>
                            </td>
                        </tr>
                        <tr height="60px">
                            <td align="center" colspan="2">
                                <input type="button" value="转到登录" onclick="window.location.replace('login.html')" id="btn1" onmousemove="changeBgColor('btn1')" onmouseout="recoverBgColor('btn1')" class="submit" />&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" accesskey="enter" value="注册" id="btn" onmousemove="changeBgColor('btn')" onmouseout="recoverBgColor('btn');" class="submit" formmethod="post"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>